<script>
import { api } from '../../api/request.js'
export default{
    name:"classify",
    data(){
        return{
            classifyData:{
                navList:[
                    {
                        module:'益智动画',ico:'',
                        child:['安全教育','绘本动画','故事天地','亲自教育'],
                    },
                    {
                        module:'全面成长',ico:'',
                        child:['安全教育','绘本动画','故事天地','亲自教育'],
                    },
                    {
                        module:'故事天地',ico:'',
                        child:['安全教育','绘本动画','故事天地','亲自教育'],
                    },
                ],
                fI:0,
                cI:0,
                search:'',
                disable:false,
                type:1,
                searchList:[],
                list:[],
                hotList:[],
            }
        }
    },
    mounted(){
        this.getModelCourse();
        this.getHotCourse();
    },
    methods:{
        changeNav(a,b){
            if(this.classifyData.disable) return false;
            this.classifyData.disable = true;
            this.classifyData.fI = a;
            this.classifyData.cI = b;
            this.classifyData.list = this.classifyData.navList[this.classifyData.fI][this.classifyData.cI].courses;
            setTimeout(() => {
                this.classifyData.disable = false;
            }, 500);
        },
        backBtn(){
            if(this.classifyData.disable) return false;
            setTimeout(() => {
                this.classifyData.disable = false;
            }, 500);
            try {
                window.WebViewJavascriptBridge.callHandler('backFromHtml')
                
            } catch (error) {
                backFromHtml.postMessage("");  
            }
        },
        routerVideo(v){
            let data = {
                rsp_id:v.rsp_id,
                cover_h:v.cover_h,
                rsp_name:v.rsp_name,
                rs_count:v.rs_count,
                rsp_desc:v.rsp_desc,
                tag:v.tag,
            }
            window.WebViewJavascriptBridge.callHandler('open_video', JSON.stringify(data))
        },
        closeBtn(){
            this.classifyData.search = '';
        },
        async getModelCourse(){
            let res = await api.getModel()
                if(res.code == 200){
                    this.classifyData.navList = res.data;
                    this.classifyData.fI = Object.keys(res.data)[0];
                    console.log(res.data[this.classifyData.fI])
                    this.classifyData.list = res.data[this.classifyData.fI][this.classifyData.cI].courses;
                }
        },
        async getHotCourse(){
            let res = await api.getHot()
            if(res.code == 200){
                this.classifyData.hotList = res.data;
            }
        },
        async searchBtn(){
            if(this.classifyData.disable) return false;
            setTimeout(() => {
                this.classifyData.disable = false;
            }, 500);
            if(this.classifyData.search==''){
                this.classifyData.type = 1;
                return false;
            }
            this.classifyData.type = 2;
            let res = await api.searchName({rsp_name:this.classifyData.search})
            if(res.code===200){
                this.classifyData.searchList = res.data;
            }
        }
    }
}

</script>
<template>
    <div class="classify">
        <div class="classify-head">
            <div class="head-back" @click="backBtn">  
                <img src="@/assets/image/btn_back.png" alt="" />
            </div>
            <div class="head-searchInput">
                <input type="text" maxlength="20" v-model="classifyData.search" placeholder="沙拉与乖乖鸭" />
                <img v-show="classifyData.search.length>0" @click="closeBtn" src="@/assets/image/close.png" alt=""/>
            </div>
            <div class="head-button" @click="searchBtn" >
                <img src="@/assets/image/search.png" alt="" />
            </div>
        </div>
        <!--  -->
        <div class="classify-container" v-if="classifyData.type==1">
            <div class="classify-nav">
                <div class="classify-nav-item" v-for="(v,i) in classifyData.navList" :key="i">
                    <div class="nav-item-title" v-if="v[0]">
                        <img :src="v[0].p_icon" alt="" />
                        <span>{{ i }}</span>
                    </div>
                    <div class="nav-item-c" :class="[i==classifyData.fI&&index==classifyData.cI?'active':'']" 
                    v-for="(c,index) in v" :key="index" @click="changeNav(i,index)"
                    >
                        {{ c.name }}
                    </div>
                </div>
            </div>
            <div class="classify-list">
                <div class="classify-list-item" v-for="(v,index) in classifyData.list" :key="index" @click="routerVideo(v)">
                    <div class="list-item-pic">
                        <img :src="v.cover_h" alt="" />
                    </div>
                    <div class="list-item-title">
                        {{ v.rsp_name }}
                    </div>
                </div>
            </div>
        </div>
        <!--  -->
        <div class="search-contianer" v-else>
            <div class="search-result" v-if="classifyData.searchList.length>0">
                <div class="search-title">
                    搜索到以下结果
                </div>
                <div class="search-list">
                    <div class="search-list-item" v-for="(v,i) in classifyData.searchList" :key="i"  @click="routerVideo(v)">
                        <div class="search-pic">
                            <img :src="v.cover_h" alt="" />
                        </div>
                        <div class="search-course-title">
                            {{ v.rsp_name}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="search-result-null" v-else>
                <div class="result-null-pic">
                    <img src="@/assets/image/pic_queshengtu.png" alt="" />
                </div>
                <div class="result-null-text">
                    <p class="tip">没有搜索到相关内容哦</p>
                    <p>试试以下的推荐内容吧</p>
                </div>
            </div>
            <div class="recommend">
                <div class="recommend-title">
                    精选推荐
                </div>
                <div class="recommend-list">
                    <div class="recommend-item" v-for="(v,i) in classifyData.hotList" :key="i"  @click="routerVideo(v)">
                        <div class="recommend-item-pic">
                            <img :src="v.cover_h" alt="" />
                        </div>
                        <div class="recommend-item-title">
                            {{ v.rsp_name }}
                        </div>
                    </div>
                   
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import './index.scss';
</style>
